<template>
  <div>
    <div class="header-container">
      <h1>我的收藏</h1>
      <div class="del-container">
        <input
          v-if="manage"
          id="demo"
          type="checkbox"
          style="display: flex;justify-content: space-between;align-items: center;"
          :checked="checkAll"
          @click="handleCheckAllChange"
        >
        <label
          v-if="manage"
          class="check-all"
          for="demo"
          style="margin-left:10px"
        >
          全选
        </label>
        <!-- <div class="check-all" style="margin-left:10px" v-if="manage">全选</div> -->
        <div v-if="manage" style="margin-left:20px " class="el-icon-delete" />
        <div v-if="manage" class="in-select" @click="delSelect">删除</div>
        <div class="unfold" @click="unfold">
          {{ manage ? "取消管理" : "批量管理" }}
        </div>
        <div
          class="clear-all"
          style="margin-left:10px;border: 1px solid #E5E5E5FF;padding: 5px 10px;"
          @click="clearLostValue"
        >
          清空失效商品
        </div>
      </div>
    </div>
    <div class="middle-container" />
    <div v-if="showTxt" class="empty-text">
      小主您当前暂无已收藏的商品哦~~
    </div>
    <div v-else class="main-container">
      <div class="goodes-list">
        <div v-for="item in collectionList" :key="item.id" class="item-container">
          <div
            class="goodes-item"
            :class="item.checked ? 'active-checked' : ''"
            @mouseenter="enter"
          >
            <span v-if="manage" class="single" />
            <span
              v-if="manage"
              :class="item.checked ? 'rectang-red' : 'rectang-grey'"
            />
            <div @click="toDetail(item)">
              <img :src="item.mainImage" alt>
              <div class="goodes-name" style=" font-size: 14px;">
                <div class="name">{{ item.childCategoryName }}</div>
                <!-- 失效条件控制显示 -->
                <div v-if="!invalid(item)" class="lost-value">失效</div>
              </div>
              <div class="mark">
                <span
                  v-if="item.standardProa && item.proaVal"
                  class="property-item"
                  v-text="item.standardProa + '：' + item.proaVal"
                >标号：外16内6.03...</span>
                <span
                  v-if="item.standardProb && item.probVal"
                  class="property-item"
                  v-text="item.standardProb + '：' + item.probVal"
                >标号：外16内6.03...</span>
                <span
                  v-if="item.standardProc && item.procVal"
                  class="property-item"
                  v-text="item.standardProc + '：' + item.procVal"
                >标号：外16内6.03...</span>
                <span
                  v-if="item.standardProd && item.prodVal"
                  class="property-item"
                  v-text="item.standardProd + '：' + item.prodVal"
                >标号：外16内6.03...</span>
                <span
                  v-if="item.standardProe && item.proeVal"
                  class="property-item"
                  v-text="item.standardProe + '：' + item.proeVal"
                >标号：外16内6.03...</span>
              </div>
              <div class="goodes-price">
                <span>￥{{ item.productPrice }}</span>
                <span class="unit"> 元/{{ item.unit }}</span>
              </div>
              <div class="txt">
                {{ formatAddress(item) }}
              </div>
            </div>
          </div>
          <div class="mask" v-if="!manage && showMask">
            <div class="confirm-txt">确定要删除该商品吗？</div>
            <div class="confirm-btn">
              <div class="confirm-sure">确定</div>
              <div class="confirm-concel">取消</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import {
  listCollection,
  removeCollection,
  getCollectionCount
} from '@/api/collection'
import { listSpu } from '@/api/cart'
import { toProductDetail, toProductList } from '@/js/product'
export default {
  data() {
    return {
      checkAll: false,
      checkedOrders: [], // 勾选收藏的集合
      collectionList: [], // 收藏商品信息
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      showTxt: false,
      spuList: [],
      lock: false,
      manage: false,
      showMask:false
    }
  },
  watch: {
    checkedOrders(newCheckedOrders) {
      console.log(newCheckedOrders)
      this.checkAll =
        this.newCheckedOrders.length === this.collectionList.length
    },
    collectionList(value) {
      if (this.lock) {
        this.lock = false
        return
      }
      const spuIds = new Set()
      value.forEach(i => {
        spuIds.add(i.spuId)
      })
      if (spuIds.size > 0) {
        listSpu(Array.from(spuIds)).then(res => {
          this.spuList = res.data
        })
      }
    },
    spuList(value) {
      this.collectionList.forEach(i => {
        const item = value.filter(
          j => j.spuRepositoryId === i.spuRepositoryId && j.spuId === i.spuId
        )[0]
        i.minBuyNum = item.minBuyNum
        i.mainImage = item.mainImage
        i.spuBrandId = item.brandId
        i.skuNum = item.skuNum
        i.status = item.status
        i.spuAId = item.proaId
        i.spuBId = item.probId
        i.spuCId = item.procId
        i.spuDId = item.prodId
        i.spuEId = item.proeId
      })
      this.lock = true
      this.collectionList.splice(0, 0)
    }
  },
  created() {
    this.listCollection()
  },
  methods: {
    // 获取收藏列表
    listCollection() {
      listCollection(this.pageIndex, this.pageSize).then(res => {
        console.log(res)
        const tableData = this.generatorObj(res.data.records)
        this.total = res.data.total
        tableData.forEach(e => {
          e.checked = false
          e.productPrice = e.productPrice.toFixed(2)
        })
        this.collectionList = [...tableData]
        // 如果请求不到数据，则显示找不到商品
        if (res.data.total > 0) {
          this.showTxt = false
        } else {
          this.showTxt = true
        }
      })
    },
    // 展开
    unfold() {
      this.manage = !this.manage
    },
    handleCheckAllChange(val) {},
    handleCheckedOrdersChange(value) {},
    // 页个数数改变的时候可获取当前显示个数
    handleSizeChange(size) {},
    // 页数改变的时候可获取当前显示当前页码数
    handleCurrentChange(currentPage) {
      console.log(currentPage)
      this.pageIndex = currentPage
      this.listCollection()
    },
    delSelect() {},
    clearLostValue() {},
    toDetail(item) {
      if (!this.invalid(item)) {
        return
      }
      toProductDetail(
        this,
        item.spuRepositoryId,
        item.minBuyNum,
        JSON.parse(item.address)
      )
    },
    // false 失效
    invalid(item) {
      return (
        item.status === 5 &&
        item.proaId === item.spuAId &&
        item.probId === item.spuBId &&
        item.procId === item.spuCId &&
        item.prodId === item.spuDId &&
        item.proeId === item.spuEId
      )
    },
    // true 缺货
    stockOut(item) {
      return item.skuNum < item.minBuyNum || item.skuNum < item.shopAmount
    },
    generatorObj(list) {
      list.forEach(obj => {
        if (obj.proaId) {
          obj.spuAId = JSON.parse(JSON.stringify(obj.proaId))
        }
        if (obj.probId) {
          obj.spuBId = JSON.parse(JSON.stringify(obj.probId))
        }
        if (obj.procId) {
          obj.spuCId = JSON.parse(JSON.stringify(obj.procId))
        }
        if (obj.prodId) {
          obj.spuDId = JSON.parse(JSON.stringify(obj.prodId))
        }
        if (obj.proeId) {
          obj.spuEId = JSON.parse(JSON.stringify(obj.proeId))
        }
        if (obj.brandId) {
          obj.spuBrandId = JSON.parse(JSON.stringify(obj.brandId))
        }
        obj.status = 5
      })
      return list
    },
    // 格式化地址
    formatAddress(item) {
      if (item.address) {
        const address = JSON.parse(item.address)
        return (
          address.receiveProvince +
          address.receiveCity +
          address.receiveDistrict +
          address.receiveAddress
        )
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-checkbox__label {
  display: none;
}
.el-pagination {
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  // margin-top: 20px;
  background-color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #ff3b30ff;
  border: 1px solid #ff3b30ff;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled) {
  // background-color: #fff;
  border: 1px solid #ddddddff;
}
::v-deep .el-pagination.is-background .btn-prev {
  border: 1px solid #ddddddff;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-left:before {
  content: "上一页";
}
::v-deep .el-pagination.is-background .btn-next {
  border: 1px solid #ddddddff;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-right:before {
  content: "下一页";
}
.single {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
}
.single::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 50%;
  height: 25%;
  border: 2px solid #fff;
  border-radius: 1px;
  border-top: none;
  border-right: none;
  background: transparent;
  transform: rotate(-45deg);
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  // background-color: #fff;
  border-color: #ff3b30;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #ff3b30;
}
::v-deep .el-checkbox__inner {
  border-color: #fff;
  border: 1px solid #ff3b30;
}
.header-container {
  height: 57px;
  background-color: #fff;
  padding: 18px 20px 18px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 20px;
  h1 {
    font-weight: 700;
    font-size: 16px;
  }
  .del-container {
    color: #6b6b6bff;
    font-size: 12px;
    display: flex;
    align-items: center;
    .check-all {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-icon-delete {
      font-size: 16px;
      margin-left: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .unfold {
      margin-left: 24px;
      border: 1px solid #e5e5e5ff;
      padding: 5px 10px;
      //  justify-content: space-between;
    }
    .unfold:hover {
      cursor: pointer;
    }
    .clear-all:hover {
      cursor: pointer;
    }
    .in-select {
      //  margin-left: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .in-select:hover {
      cursor: pointer;
    }
    span:hover {
      cursor: pointer;
    }
  }
}
.middle-container {
  height: 20px;
  background-color: #f7f7f7;
}
.empty-text {
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
  color: #ff3b30;
}
.main-container {
  padding: 20px;
  padding-bottom: 0;
  background-color: #fff;
  .goodes-list {
    display: flex;
    flex-wrap: wrap;
      .item-container{
         position: relative;
         .mask {
        position: absolute;
        width: 180px;
        height: 318px;
        background: rgba(0, 0, 0, 0.5);
       top: 0;
    left: 0;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 100;

        .confirm-txt {
          margin-bottom: 15px;
        }
        .confirm-btn {
          display: flex;
          .confirm-sure {
            width: 60px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ff3b30ff;
          }
          .confirm-concel {
            width: 60px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
            color: #6b6b6bff;
            margin-left: 10px;
          }
        }
      }
   .goodes-item {
      border: 1px solid #e5e5e5;
      width: 180px;
      height: 318px;
      padding-bottom: 10px;
      margin-bottom: 20px;
      margin-right: 20px;
      position: relative;
      border: 1px solid #e5e5e5ff;
      overflow: hidden;

      .rectang-red {
        width: 0;
        height: 0;
        border-radius: 3px;
        border-top: solid 30px transparent;
        border-right: solid 30px #ff3b30;
        border-bottom: solid 30px transparent;
        //   background-color: #FF3B30;
        transform: rotate(135deg);
        position: absolute;
        top: -20px;
        right: -5px;
        content: "";
      }
      .rectang-grey {
        width: 0;
        height: 0;
        border-radius: 3px;
        border-top: solid 30px transparent;
        border-right: solid 30px rgba(0, 0, 0, 0.5);
        border-bottom: solid 30px transparent;
        //   background-color: #FF3B30;
        transform: rotate(135deg);
        position: absolute;
        top: -20px;
        right: -5px;
        content: "";
      }
      img {
        width: 180px;
        height: 155px;
        object-fit: cover;
        // margin-bottom: 13px;
      }
      .goodes-name {
        color: #6b6b6bff;
        font-weight: 700;

        // line-height: 20px;
        // height: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 12px;
        .lost-value {
          font-size: 11px;
          font-weight: 400;
          color: #fff;
          height: 15px;
          line-height: 15px;
          padding: 0 7px;
          background-color: #a7a7aa;
          border-radius: 2px;
        }
      }
      .mark {
        padding: 0px 12px;
        font-size: 12px;
        height: 48px;
        color: #a7a7aaff;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        flex-direction: column;
      }
      .goodes-price {
        padding: 5px 12px;
        // height: 21px;
        // line-height: 21px;
        color: #ff3b30;
        font-size: 12px;
        .unit {
          font-size: 10px;
          color: #a7a7aaff;
        }
        // margin-bottom: 10px;
      }
      .txt {
        color: #6b6b6b !important;
        padding: 0 12px;
        font-size: 10px;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    & .active-checked {
      border: 1px solid #ff3b30;
    }
      }
 .item-container:nth-child(5n) {
.goodes-item{
margin-right: 0;
}
 }
  }
}
</style>
